<template>
<body id="poster">
  <el-form
    ref="loginFormRef"
    :rules="loginFormRules"
    :model="loginForm"
    class="login-container"
    label-position="left"
    label-width="0px"
  >
    <h2 class="login_title">TEAM1在线学习平台登录</h2>
    <el-form-item prop="username">
      <el-input
        type="text"
        v-model="loginForm.username"
        auto-complete="off"
        prefix-icon="el-icon-user"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        type="password"
        v-model="loginForm.password"
        auto-complete="off"
        prefix-icon="el-icon-s-check"
      ></el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input type="text" v-model="loginForm.code" placeholder="- - - -">
        <template slot="prepend">验证码</template>
        <template slot="append">
          <div class="login-code" @click="refreshCode">
            <Identify :identifyCode="identifyCode"></Identify>
          </div>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item class="button">
      <el-button type="info" @click="resetLoginForm">重置</el-button>
      <el-button type="primary" style="background: #505458;border: none" v-on:click="login">登录</el-button>
      <el-button type="register" @click="gotolink">注册</el-button>
    </el-form-item>
  </el-form>
</body>
</template>

<script>
import Identify from "../components/common/Sidentify";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        code: "",
        password: ""
      },
      identifyCodes: "1234567890abcdefjhijklinopqrsduvwxyz",
      identifyCode: "",
      loginFormRules: {
        username: [
          { required: true, message: "请输入登陆名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入登陆密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      responseResult: []
    };
  },
  components: {
    Identify // //注册组件
  },

  mounted() {
    // 初始化验证码
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    resetLoginForm() {
      console.log(this);
      this.$refs.loginFormRef.resetFields();
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    login() {
      var _this = this;
      if (
        _this.loginForm.code.toLowerCase() !== _this.identifyCode.toLowerCase()
      ) {
        _this.$message.error("请填写正确验证码");
        _this.refreshCode();
        return;
      }
      _this.$axios
        .post("/login", {
          username: _this.loginForm.username,
          password: _this.loginForm.password
        })
        .then(successResponse => {
          window.sessionStorage.setItem("username", this.loginForm.username);

          if (successResponse.data.code === 401) {
            return _this.$message.error(
              "登录失败！请检查用户名或密码是否正确。"
            );
          }
          if (successResponse.data.code === 200) {
            window.sessionStorage.setItem("iflogin", true);
            _this.$message.success("登录成功！");
            _this.$router.replace({ path: "/home" });
          } else if (successResponse.data.code === 201) {
            _this.$router.replace({ path: "/teacher" });
          } else {
            _this.$router.replace({ path: "/admin" });
          }
        })
        .catch(failResponse => {});
    },
    gotolink() {
      //指定跳转地址
      this.$router.replace("/register");
    }
  }
};
</script>

<style>
#poster {
  background: url("../assets/bk.png") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
}
body {
  margin: 0px;
}
.login-container {
  opacity: 0.93;
  border-radius: 15px;
  background-clip: padding-box;
  margin: 90px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.button {
  justify-content: flex-end;
}
.code {
  margin: 400px auto;
  width: 114px;
  height: 40px;
  border: 1px solid red;
}
</style>
